<template>
	<view class="ys">
		<y-header></y-header>
		<view class="shopbody">
			<y-bread :name="$t('index.spfl')"></y-bread>
			<!-- 手机端筛选 -->
			<view class="mid-screen">
				<view class="screen-list">
					<view class="screen-item">
						<view class="screen-item-text">
							{{$t('index.fl')}}
						</view>
						<view class="pxbox" @click="fl_show = true">
							<view class="px-text">
								{{goodFlText}}
							</view>
							<uni-icons type="down" :size="15"></uni-icons>
						</view>
					</view>
					<view class="screen-item">
						<view class="screen-item-text">
							{{$t('index.sx')}}
						</view>
						<view class="pxbox" @click="sx_show = true">
							<view class="px-text">
								{{goodSxText}}
							</view>
							<uni-icons type="down" :size="15"></uni-icons>
						</view>
					</view>
					<view class="screen-item">
						<view class="screen-item-text">
							{{$t('index.px')}}
						</view>
						<view class="pxbox" @click="show_px = true">
							<view class="px-text">
								{{goodScreenText}}
							</view>
							<uni-icons type="down" :size="15"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<!-- 手机端弹出分类 -->
			<view class="flbox" @click="closeBox" v-show="fl_show">
				<view class="flbg" @click.stop>
					<view class="fl-title">
						{{$t('index.fl')}}
						<uni-icons @click="closeBox" class="icon-close" type="closeempty" :size="15"></uni-icons>
					</view>
					<view class="fl-menu">
						<view class="left-menu-list">
							<view :class="leftMenuId == item.id ?'left-menu-li active':'left-menu-li'"
								@click="midChangeleft(item)" v-for="(item,index) in firstList" :key="index">
								<view class="left-menu-fname">
									<view class="left-menu-text">
										{{item.name}}
									</view>
									<uni-icons class="icon-down" :size="15" type="down"
										v-if="item.children && item.children.length>0"></uni-icons>
								</view>
								<view class="left-second">
									<view :class="goodFlYx.sid == sitem.sid?'left-second-li active':'left-second-li'"
										v-for="(sitem,sindex) in item.children" :key="sindex"
										@click.stop="changeFl(sitem)">
										{{sitem.name}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="fl-btn">
						<button @click="chooseFl">{{$t('index.qr')}}</button>
					</view>
				</view>
			</view>
			<!-- 手机端弹出筛选区间 -->
			<view class="flbox " @click="closeBox" v-show="sx_show">
				<view class="flbg sxbg" @click.stop>
					<view class="fl-title">
						{{$t('index.sx')}}
						<uni-icons @click="closeBox" class="icon-close" type="closeempty" :size="15"></uni-icons>
					</view>
					<view class="fl-menu sx-menu">
						<view class="price-tips">
							({{$t('index.ysqj')}}：NT$299-NT$2,980)
						</view>
						<view class="price-interval">
							<view class="min-price">
								<text>{{$t('index.min')}}</text>
								<input type="number" v-model="minPrice">
							</view>
							<view class="line">
							</view>
							<view class="max-price">
								<text>{{$t('index.max')}}</text>
								<input type="number" v-model="maxPrice">
							</view>
						</view>
					</view>
					<view class="fl-btn">
						<button @click="priceScreen">{{$t('index.sx')}}</button>
					</view>
				</view>
			</view>
			<!-- 手机端弹出排序 -->
			<view class="pxlistbox" v-show="show_px">
				<view class="pxbg">
					<view class="pxtitle">
						{{$t('index.px')}}
						<uni-icons @click="closeBox" class="icon-close" type="closeempty" :size="15"></uni-icons>
					</view>
					<view class="pxlist">
						<radio-group name="px" @change="changePxRadio">
							<label class="pxitem" v-for="(item,index) in screenRange" :key="index">
								<radio :checked="goodScreen == item.value" :value="String(item.value)" />
								<text>{{item.text}}</text>
							</label>
						</radio-group>
					</view>
				</view>
			</view>

			<view class="shopmain">
				<!-- pc端 -->
				<view class="pc-left-menu">
					<view class="left-menu-title">
						{{$t('index.spfl')}}
					</view>
					<y-leftmenu :list="firstList" @changeleft="changeleft" @pcChooseFl="pcChooseFl"></y-leftmenu>
					<view class="pricebox">
						<view class="left-menu-title">
							{{$t('index.jgqj')}}
						</view>
						<view class="price-tips">
							({{$t('index.ysqj')}}：NT$299-NT$2,980)
						</view>
						<view class="price-interval">
							<view class="min-price">
								<text>{{$t('index.min')}}</text>
								<input type="number" v-model="minPrice">
							</view>
							<view class="line">
							</view>
							<view class="max-price">
								<text>{{$t('index.max')}}</text>
								<input type="number" v-model="maxPrice">
							</view>
						</view>
						<view class="price-btn">
							<button @click="priceScreen">{{$t('index.sx')}}</button>
						</view>
					</view>
				</view>
				<view class="right-goodslist">
					<view class="right-top">
						<view class="right-top-title">
							{{$t('index.gong')}} {{list.length}} {{$t('index.gsp')}}
						</view>
						<view class="ch-right">
							<view class="change-goods">
								<uni-icons v-if="styleType == 'col'" type="list" @click="changeType"></uni-icons>
								<uni-icons v-else type="bars" @click="changeType"></uni-icons>
							</view>
							<view class="pc-screen">
								<uni-data-select :clear='false' v-model="goodScreen" :localdata="screenRange"
									@change="changeScreen"></uni-data-select>
							</view>
						</view>
					</view>
					<view class="right-goodsbody">
						<y-goodslist @collectGoods="collectGoods" :styleType="styleType" :list="list"></y-goodslist>
						<view class="right-page" v-show="list.length > 0">
							<!-- <text @click="changePage">点击查看更多</text> -->
							<page-pagination :total="page.total" color="#ff5353" :pageSize="page.pageSize"
								:currentPage="page.currentPage" @change="changePage"></page-pagination>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		category,
		goodsLst
	} from "@/api/goods.js"
	export default {
		data() {
			return {
				firstList: getApp().globalData.firstList,
				leftMenuId: '', //左侧分类id 
				minPrice: '', //筛选价格 最低价格
				maxPrice: '', //筛选价格 最高价格
				list: [],
				page: { //分页
					total: 1,
					pageSize: 50,
					currentPage: 1
				},
				styleType: 'col', // col:表格 row:列表
				goodScreen: 4, //当前排序id
				goodScreenText: this.$t('index.dztj'), //当前排序
				screenRange: [{ //筛选内容
						value: 0,
						text: this.$t('index.cddg')
					},
					{
						value: 1,
						text: this.$t('index.cgdd')
					},
					{
						value: 2,
						text: this.$t('index.zxsj')
					},
					// {
					// 	value: 3,
					// 	text: "最多人看"
					// },
					{
						value: 4,
						text: this.$t('index.dztj')
					},
					{
						value: 5,
						text: this.$t('index.name_sort')
					},
				],
				show_px: false, //是否显示排序列表
				fl_show: false, //是否显示分类列表
				goodFlText: this.$t('index.qbfl'), //当前分类
				goodFlYx: {}, //预选分类
				goodSxText: this.$t('index.qxz'), //当前筛选
				sx_show: false, //是否显示筛选列表
				sort_value: '', //排序值
			}
		},
		onLoad(e) {
			if (e.cid) {
				this.leftMenuId = e.cid
			}
			this.category()
			this.getGoods()
		},
		methods: {
			category() {
				category().then(res => {
					this.firstList = res.data
				})
			},
			//手机端筛选金额
			choosePrice() {
				if (this.minPrice == '') {
					uni.$showMsg(this.$t('index.qsrzxje'))
					return
				}
				if (this.maxPrice == '') {
					uni.$showMsg(this.$t('index.qsrzdje'))
					return
				}
				this.goodSxText = '$ ' + this.minPrice + ' ~ ' + '$ ' + this.maxPrice
				this.closeBox()
				this.page.currentPage = 1
				this.page.total = 1
				this.getGoods()
			},
			//选择分类--筛选
			chooseFl() {
				console.log(this.goodFlYx);
				this.goodFlText = this.goodFlYx.name
				this.closeBox()
				this.leftMenuId = this.goodFlYx.id
				this.page.currentPage = 1
				this.page.total = 1
				this.minPrice = ''
				this.maxPrice = ''
				this.getGoods()
			},
			//pc端筛选金额
			priceScreen() {
				if (this.minPrice == '' && this.maxPrice == '') {
					return false;
				}
				this.page.currentPage = 1
				this.page.total = 1
				this.getGoods()
			},
			//手机端选择分类
			midChangeleft(item) {
				if (this.leftMenuId == item.id) {
					this.leftMenuId = ''
				} else {
					this.leftMenuId = item.id
					this.goodFlYx = item
				}
				if (!this.fl_show) {
					this.goodFlText = item.fname
					this.goodFlYx = item
				}
			},
			//选择分类--预选
			changeFl(item) {
				this.goodFlYx = item
				this.leftMenuId = item.id
			},
			//pc选择分类
			pcChooseFl(item) {
				console.log(item);
				let url = location.href.split('?')[0] + "?cid=" + item.id
				history.replaceState({}, '', url)
				this.goodFlText = item.sname
				this.leftMenuId = item.id
				this.page.currentPage = 1
				this.page.total = 1
				this.minPrice = ''
				this.maxPrice = ''
				this.getGoods()
			},
			//关闭弹出列表
			closeBox() {
				this.show_px = false
				this.fl_show = false
				this.sx_show = false
			},
			//选择排序条件
			changePxRadio(e) {
				this.changeScreen(e.detail.value)
				this.closeBox()
				this.sort_value = e.detail.value
			},
			//排序筛选
			changeScreen(e) {
				let i = this.screenRange.findIndex(item => item.value == e)
				this.goodScreenText = this.screenRange[i].text
				this.sort_value = e
				this.page.currentPage = 1
				this.page.total = 1
				this.minPrice = ''
				this.maxPrice = ''
				this.getGoods()
			},
			//收藏商品
			collectGoods(id, e) {
				uni.$showMsg(status ? '收藏成功' : '取消收藏')
				item.collected = status
			},
			//切换商品样式
			changeType() {
				if (this.styleType == 'col') {
					this.styleType = 'row';
				} else {
					this.styleType = 'col'
				}
			},
			//选择分页
			changePage(e) {
				this.page.currentPage = e
				this.getGoods()
			},
			// 左侧分类
			changeleft(item) {
				this.leftMenuId = item[0]
				this.goodFlText = item[1]
				this.goodFlYx = item[2]
			},
			getGoods() {
				let that = this
				goodsLst({
					category_id: that.leftMenuId,
					min_price: that.minPrice,
					max_price: that.maxPrice,
					page: that.page.currentPage,
					limit: that.page.pageSize,
					sort: that.sort_value
				}).then(res => {
					if (res.code == 0) {
						that.goodFlText = res.data.cate_name || '全部分类'
						that.list = res.data.list.data
						that.page.total = res.data.list.total
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shopbody {
		margin: 20px auto 0px;
		max-width: 1180px;
		box-sizing: border-box;

		.mid-screen {
			display: none;

			.screen-list {
				display: flex;
				padding: 10px 0;
				box-sizing: border-box;
				justify-content: space-between;

				.screen-item {
					width: 33.33333%;
					border-right: 2px solid #ddd;
					padding: 0 10px;

					.screen-item-text {
						font-size: 12px;
						color: #999999;
						margin-bottom: 5px;
					}

					.pxbox {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 15px;

						.px-text {
							width: calc(100% - 20px);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

	.flbox {
		position: fixed;
		background: #00000040;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		z-index: 1002;

		.flbg {
			background: #fff;
			border-radius: 5px;
			width: 100%;
			height: 60vh;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;

			.fl-title {
				position: relative;
				text-align: center;
				height: 48px;
				line-height: 48px;

				.icon-close {
					position: absolute;
					top: 50%;
					right: 10px;
					transform: translate(-50%, -50%);
				}
			}

			.fl-menu {
				height: calc(60vh - 108px);
				overflow-y: scroll;

				&::-webkit-scrollbar {
					display: none;
				}

				.left-menu-list {
					border-bottom: 0;

					.left-menu-li {
						.left-menu-fname {
							height: 44px;
							line-height: 44px;
							box-sizing: border-box;
						}

						&:hover {
							.left-menu-text {
								border-bottom: 0;
							}
						}

						.left-second-li {
							&.active {
								background: #ff535310;
								color: #000;
								font-weight: bold;
							}
						}
					}
				}

			}

			.fl-btn {
				padding: 10px 2%;
				box-sizing: border-box;
				box-shadow: 0 -3px 5px #eee;

				button {
					font-size: 14px;
					border-radius: 5px;
					padding: 8px 0px;
					color: #fff;
					background-color: #ff5353;
					width: 100%;
					margin: 0px auto;
					height: 40px;
					line-height: 40px;
					display: flex;
					-webkit-box-pack: center;
					justify-content: center;
					-webkit-box-align: center;
					align-items: center;
				}
			}
		}

		.sxbg {
			height: 30vh;
			min-height: 250px;

			.fl-menu {
				min-height: 142px;
				height: calc(30vh - 108px);
			}
		}
	}

	.pxlistbox {
		position: fixed;
		background: #00000040;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1002;

		.pxbg {
			background: #fff;
			border-radius: 5px;
			width: 80%;
			max-width: 288px;
		}

		.pxtitle {
			position: relative;
			text-align: center;
			height: 48px;
			line-height: 48px;

			.icon-close {
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translate(-50%, -50%);
			}
		}

		.pxlist {
			.pxitem {
				width: 80%;
				display: flex;
				align-items: center;
				margin-left: 10%;
				margin-bottom: 20px;

				radio {
					transform: scale(.7);
				}
			}
		}
	}

	.pc-left-menu {
		margin-top: 10px;
		padding: 0 5px;
		max-width: 265px;
		padding-right: 25px;
		box-sizing: border-box;

		.left-menu-title {
			font-weight: bold;
		}
	}

	.left-menu-list {
		padding: 8px 0 0 0;
		width: 100%;
		border-bottom: 1px solid #ddd;

		.left-menu-li {
			.left-menu-text {
				padding-left: 5px;
			}

			.left-second {
				height: 0;
				opacity: 0;
				overflow: hidden;

				.left-second-li {
					background: #f8f8f8;
					height: 30px;
					font-size: 14px;
					line-height: 30px;
					font-weight: normal;
					padding: 5px 0;
					padding-left: 12px;
					color: rgb(51, 51, 51);
					overflow: hidden;
					word-break: break-all;
					white-space: nowrap;
					text-overflow: ellipsis;
					cursor: pointer;

					&:hover {
						background: #f0f0f0;
					}
				}


			}

			&.active {
				background: #f0f0f0;

				.left-second {
					height: 100%;
					opacity: 1;
				}

				.icon-down {
					transform: rotate(-180deg);
				}
			}

			.left-menu-fname {
				display: flex;
				justify-content: space-between;
				-webkit-box-align: center;
				align-items: center;
				flex-shrink: 0;
				padding: 5px 8px 5px 0;
				min-height: 20px;
				line-height: 20px;
				font-size: 14px;
				color: rgb(51, 51, 51);
				text-decoration: none;
				cursor: pointer;

				&:hover {
					background: #efefef;

					.left-menu-text {
						border-bottom: 1px solid #333;
					}
				}
			}
		}

		.icon-down {
			font-weight: bold;
			transition: .3s;
		}

		&.active {
			.left-second {
				height: 100%;
				opacity: 1;
			}

			.icon-down {
				transform: rotate(-180deg);
			}
		}
	}

	.pricebox,
	.sx-menu {
		padding: 18px 0;
		border-bottom: 1px solid #ddd;

		.price-tips {
			font-size: 13px;
			line-height: 16px;
			color: #666666;
			margin: 10px 0;
		}

		.price-interval {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.max-price,
			.min-price {
				display: flex;
				flex-direction: column;

				text {
					font-size: 14px;
					margin-bottom: 5px;
				}

				input {
					border: 1px solid #dddddd;
					width: 100px;
					height: 40px;
					border-radius: 5px;
					box-sizing: border-box;
					padding: 10px;
				}
			}

			.line {
				width: 30px;
				height: 1px;
				margin: 0 10px;
				margin-top: 20px;
				border-bottom: 1px solid #000;
			}
		}

		.price-btn {
			display: flex;
			justify-content: flex-end;
			margin-top: 10px;

			button {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
				padding: 0px 10px;
				border-radius: 5px;
				min-width: 68px;
				margin: 0;
				box-sizing: border-box;
				text-align: center;
				cursor: pointer;
				color: #ffffff;
				background: #ff5353;
			}
		}
	}

	.sx-menu {
		padding: 0 20px;
		box-sizing: border-box;
		height: 20vh;

		.price-interval {
			max-width: 300px;

			.min-price,
			.max-price {
				input {
					width: 130px;
				}
			}
		}
	}

	.shopmain {
		display: flex;
		justify-content: space-between;

		.right-goodslist {
			flex: 1;

			.right-top {
				font-size: 13px;
				color: #666666;
				display: flex;
				justify-content: space-between;

				.right-top-title {
					padding-left: 5px;
				}

				.ch-right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 5px;

					.pc-screen {
						min-width: 130px;
					}
				}

				.change-goods {
					padding-right: 10px;
				}
			}

			.right-goodsbody {
				margin-top: 15px;

				.right-page {
					display: flex;
					justify-content: center;
					font-size: 14px;
					color: #777;
					margin: 15px 0;

					text {
						cursor: pointer;
					}
				}
			}
		}
	}

	@media (max-width:1000px) {
		.pc-left-menu {
			display: none;
		}

		.right-top-title {
			margin-top: 10px;
		}

		.pc-screen {
			display: none;
		}

		.shopbody {
			.mid-screen {
				display: block;
			}
		}
	}
</style>